<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 600px;
            margin: 50px auto
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        /* .nav li:not(:first-child) {
            border-left: 0;
        } */

        .nav li+li {
            border-left: 0;
        }

        .active {
            background-color: #6ff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>nav_01</li>
            <li>nav_02</li>
            <li>nav_03</li>
            <li>nav_04</li>
            <li>nav_05</li>
            <li>nav_06</li>
        </ul>
    </div>
</body>
<script>

    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");  // [li,li,li,li,li,li]

    // 点谁 谁变红
    // 一个一个绑定 -> 太麻烦
    // liList[0].onclick = function () { }
    // liList[1].onclick = function () { }
    // liList[2].onclick = function () { }
    // liList[3].onclick = function () { }
    // liList[4].onclick = function () { }
    // liList[5].onclick = function () { }


    // 多元素绑定事件 -> 循环绑定 => 有问题 -> li和i都是最后一个

    // 解析:
    // 1. 页面加载时循环绑定事件,此时事件不会触发(事件点击才触发), 所有事件绑定完毕,全局的li变为:  <li>nav_06</li>  i变为:6 

    // 2. 元素被点击时 -> 执行绑定的函数 -> 函数作用域中没有li和i -> 向外跳一层找全局作用域 -> 全局作用域的li和i -> <li>nav_06</li>  :6 


    // 方法2:
    // 解析元素被点击时 -> 执行绑定的函数 -> 函数作用域中没有li和i -> 向外跳一层找父作用域(全局作用域)
    // 有没有什么方法->让事件向外跳一层时不找全局作用域 -> 找循环当前的 li和i
    // a. 在for中包裹一个函数(函数作用域) 每次循环时立即执行函数 -> 找对应下标的元素 绑定事件 



    // 在for中包裹一个函数(函数作用域) 每次循环时立即执行函数 -> 找对应下标的元素 绑定事件
    // for (var i = 0; i < liList.length; i++) {  // i=> 0-5
    //     // 先声明
    //     function fn(i) { // i 形参 -> 0 1 2 3 4 5
    //         var li = liList[i];  //获取对应下标的元素
    //         // 页面加载时循环 -> 绑定事件->元素被点击时才会触发  
    //         li.onclick = function () {
    //             //  元素被点击时 -> 执行绑定的函数 -> 自身作用域中没有li和i -> 向外跳一层找父作用域(fn)  -> 循环当前的li和i
    //             debugger;
    //             console.log(li, i);
    //         }
    //     }
    //     // 在调用
    //     fn(i);// 实参 fn(0) fn(1) ... fn(5)
    // }

    // 优化写法1: 
    // for (var i = 0; i < liList.length; i++) {  // i=> 0-5
    //     // 自执行函数
    //     (function (i) { // i 形参 -> 0 1 2 3 4 5
    //         var li = liList[i];  //获取对应下标的元素
    //         // 页面加载时循环 -> 绑定事件->元素被点击时才会触发  
    //         li.onclick = function () {
    //             //  元素被点击时 -> 执行绑定的函数 -> 自身作用域中没有li和i -> 向外跳一层找父作用域(fn)  -> 循环当前的li和i
    //             debugger;
    //             console.log(li, i);
    //         }
    //     })(i);// 实参 fn(0) fn(1) ... fn(5)
    // }

    // 优化写法2: 
    // [li,li,li,li,li,li]
    Array.from(liList).forEach(function (li, i) {
        li.onclick = function () {
            //  元素被点击时 -> 执行绑定的函数 -> 自身作用域中没有li和i -> 向外跳一层找父作用域(fn)  -> 循环当前的li和i
            debugger;
            console.log(li, i);
        }
    })










</script>

</html>